<template>
  <div class="page-bill">
    <header class="flx-bm fz18 clr1 px15 h45 w100p">
      <div>
        <AweIcon url="/usr" name="angle-left" />
      </div>
      <div>订单管理</div>
      <div>
        <AweIcon url="/" />
      </div>
    </header>
    <section>
      <div class="bgc11">
        <Tabs ul-class="h44 bgc14 px15" content-class="bgc11" li-class="h100p flx-mm" act-class="clr1 bdb1" unact-class="clr5 bdb13" :act-tab="params.activeTab">
          <Tab v-for="(i,n) in subMenu" :key="n" :title="i.title">
            <BillCart v-for="(j, m) in i.bills" :key="m" :bill="j" class="bgc14 mt10" @delete-bill="deleteBill('uid_1', j.bill_id)"/>
          </Tab>
        </Tabs>
      </div>
    </section>
  </div>
</template>

<script>
  import AweIcon from 'assets/myTools/vueTools/com/common/awe-icon/awe-icon'
  import Tabs from 'assets/myTools/vueTools/com/common/tab/vt-tabs'
  import Tab from 'assets/myTools/vueTools/com/common/tab/vt-tab'
  import BillCart from 'components/bill/bill-cart'
  import {myTools} from '../assets/myTools/jsTools/jsTools'

  export default {
    components: {
      AweIcon,
      Tab,
      Tabs,
      BillCart
    },
    data () {
      return {
        subMenu: [
          {
            title: '全部',
            bills: []
          },
          {
            title: '待付款',
            bills: [],
            name: 'unpaid',
            url: '/',
            icon: 'credit-card'
          },
          {
            title: '待发货',
            bills: [],
            name: 'dispatched',
            url: '/',
            icon: 'truck'
          },
          {
            title: '待收货',
            bills: [],
            name: 'unget',
            url: '/',
            icon: 'cube'
          }
        ],
        params: this.$route.params
      }
    },
    async created () {
      let bills = await this.getBills({
        uid: 'uid_1'
      })

      this.subMenu[0].bills = bills
      bills.forEach(i=>{
        this.subMenu.forEach(j=>{
          if(i.status === j.name){
            j.bills.push(i)
          }
        })
      })

    },
    methods: {
      async getBills (params) {
        const {status, data} = await this.$axiosApi.postUsrBill(params)
        if (status === 200 && data.code === 0) {
          return data.data
        }
      },
      async deleteBill(uid, bill_id){
        const {status, data} = await this.$axiosApi.postDeleteUsrBill({
            uid,
            bill_id
        })
        if(status === 200 && data.code === 0) {
          this.subMenu.forEach(i=>{
            i.bills.forEach((j,n)=>{
              if(j.bill_id === bill_id){
                i.bills.splice(n,1)
              }
            })
          })
        }else{
          console.log('dosent delete bill')
        }
      }
    }
  }
</script>

<style scoped>

</style>
